---
title: React
description: React-specifikke lint-regler for Ultracite.
---

React-konfigurationen har React-specifikke lint-regler for JSX, hooks og komponentmønstre.

## Installation

Tilføj React-konfigurationen til din `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/react"]
}
```

## Oversigt

Denne konfiguration tilføjer regler, der er specifikke for React-udvikling:

- **JSX-regler**: Håndhæv korrekt JSX-syntaks og mønstre
- **Hooks-regler**: Sørg for, at React-hooks bruges korrekt
- **Komponentregler**: Håndhæv bedste praksis for React-komponenter
- **Håndtering af children**: Forhindre forkert brug af children-proppen

## React-specifikke regler

### Korrekthed

| Regel | Indstilling | Beskrivelse |
|------|---------|-------------|
| `noChildrenProp` | `error` | Forhindre at children videregives som props. Children bør være indlejret mellem åbningstag og lukketag. |
| `noNestedComponentDefinitions` | `error` | Forhindre komponentdefinitioner inde i andre komponenter. Dette forårsager unødvendige re-renders. |
| `noReactPropAssignments` | `error` | Forhindre at props tildeles på ny i React-komponenter. Props bør betragtes som uforanderlige. |
| `noRenderReturnValue` | `error` | Forhindre brug af returværdien fra `ReactDOM.render()`. |
| `noVoidElementsWithChildren` | `error` | Forhindre at void-elementer (som `<img>`, `<br>`) har children. |
| `useExhaustiveDependencies` | `error` | Håndhæv, at alle dependencies er korrekt angivet i React-hooks (useEffect, useCallback, useMemo). |
| `useHookAtTopLevel` | `error` | Håndhæv, at alle React-hooks kaldes fra topniveauet i komponentfunktioner, ikke inde i løkker, betingelser eller indlejrede funktioner. |
| `useJsxKeyInIterable` | `error` | Håndhæv, at elementer i iterabler har en `key`-prop til Reacts reconciliation. |

### Eksperimentel

| Regel | Indstilling | Beskrivelse |
|------|---------|-------------|
| `noReactForwardRef` | `error` | Forhindre brug af det ældre `React.forwardRef`. Brug ref som en prop i stedet (React 19+). |

### Stil

| Regel | Indstilling | Beskrivelse |
|------|---------|-------------|
| `useReactFunctionComponents` | `error` | Håndhæv brugen af funktionskomponenter frem for klassekomponenter i React. |

### Mistænkelige

| Regel | Indstilling | Beskrivelse |
|------|---------|-------------|
| `noArrayIndexKey` | `error` | Forhindre brug af arrayindeks som keys. Arrayindeks er ikke stabile identifikatorer og kan forårsage problemer med komponenttilstand. |
| `noDuplicateJsxProps` | `error` | Forhindre duplikerede egenskaber i JSX. |
| `noSuspiciousSemicolonInJsx` | `error` | Forhindre semikoloner, der ændrer semantikken af JSX-elementer. |
| `noReactSpecificProps` | `off` | Tillad React-specifikke props som `className` og `htmlFor`. |